<template>
  <div id="registerInvoiceEdit" style="position: relative;">
    <!--   基础信息   -->
    <div class="filter-box">
      <a-form-model ref="form" :rules="rules" :model="form" :label-col="{span: 8}" :wrapper-col="{span: 14}" >
        <a-row class="info">
          <a-col :span="8">
            <a-form-model-item label="项目组织" class="form-col" prop="orgName">
              <a-input v-model="form.orgName"  disabled />
            </a-form-model-item>
          </a-col>
          <a-col :span="8">
            <a-form-model-item label="区域" ref="complanyName" class="form-col" prop="complanyName">
              <a-select v-model="form.complanyName" placeholder="请选择区域"  allowClear="true" showSearch="true">
                <a-select-option v-for="option in area" :key="option.label" :value="option.value">{{option.label}}</a-select-option>
              </a-select>
            </a-form-model-item>
          </a-col>
          <a-col :span="8">
            <a-form-model-item label="项目" ref="projectName" class="form-col" prop="projectName">
              <a-input v-model="form.projectName" placeholder="请输入项目" @click="showDiag" />
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row class="info">
          <a-col :span="8">
            <a-form-model-item label="单据编码" class="form-col" prop="billcode">
              <a-input v-model="form.billcode"  :disabled="true" />
            </a-form-model-item>
          </a-col>
          <a-col :span="8">
            <a-form-model-item label="单据日期" class="form-col" prop="billdate" >
              <a-date-picker v-model="form.billdate" clearable  placeholder="请选择单据日期"
                             valueFormat="YYYY-MM-DD HH:mm:ss" :show-time="{ defaultValue: $moment('00:00:00', 'HH:mm:ss') }" >
              </a-date-picker>
            </a-form-model-item>
          </a-col>
          <a-col :span="8">
            <a-form-model-item label="登记人" class="form-col" prop="registerName">
              <a-input v-model="form.registerName" placeholder="请输入登记人"  @click="showMemberDiag"/>
            </a-form-model-item>
          </a-col>
        </a-row>

        <a-row class="info">
          <a-col :span="8">
            <a-form-model-item label="单据类型编码" class="form-col" prop="billtype">
              <a-input  v-model="form.billtype" :disabled="true" />
            </a-form-model-item>
          </a-col>
          <a-col :span="8">
            <a-form-model-item label="单据状态" class="form-col" prop="billStatusName">
              <a-input v-model="form.billStatusName" :disabled="true" />
            </a-form-model-item>
          </a-col>
          <a-col :span="8">
            <a-form-model-item label="补充说明" class="form-col" prop="memo">
              <a-textarea v-model="form.memo" placeholder="请输入备注"  />
            </a-form-model-item>
          </a-col>
        </a-row>
        <!--   物料     -->
        <a-row class="info">
          <a-col :span="8">
            <a-form-model-item label="物料名称" class="form-col" prop="deliveryPeople">
              <a-input v-model="form.matrialName" placeholder="请输入物料名称" @click="showMaterialDiag" :disabled="false"/>
            </a-form-model-item>
          </a-col>
          <a-col :span="8">
            <a-form-model-item label="处理时间" class="form-col" prop="billdate" >
              <a-date-picker v-model="form.dealTime" clearable  placeholder="请选择处理时间"
                             valueFormat="YYYY-MM-DD HH:mm:ss" :show-time="{ defaultValue: $moment('00:00:00', 'HH:mm:ss') }" >
              </a-date-picker>
            </a-form-model-item>
          </a-col>
          <a-col :span="8">
            <a-form-model-item label="处理原因" class="form-col" prop="deliveryPeople">
              <a-textarea
                v-model="form.dealReason"
                placeholder="请输入处理原因"
                :disabled="false"
              />
            </a-form-model-item>
          </a-col>
        </a-row>
      </a-form-model>
    </div>
    <div class="filter-box">
      <a-button type="primary" @click="handleSubmit">保存</a-button>
    </div>
    <a-modal title="选择项目" :visible="formVisible" @cancel="hideFormVisible" :footer="null" width="50%" >
      <div>
        <div>
          <div>
            <div style="color: rgba(0, 0, 0, 0.45);padding-left:10px">项目：</div>
            <a-input-search placeholder="请选择项目名称 " style="width: 200px" v-model="searchProject.name" @search="searchWl"/>
          </div>
          <DataTable rowKey="phidProject"  :showConfig="false" :tableData="Data" :tableColumn="projectColumn" :pageConfig="pageConfig"></DataTable>
        </div>
      </div>
    </a-modal>

    <a-modal title="选择申请单" :visible="applyFormVisible" @cancel="hideApplyFormVisible" :footer="null" width="50%" >
      <div>
        <div>
          <div>
            <div style="color: rgba(0, 0, 0, 0.45);padding-left:10px">申请单：</div>
            <a-input-search placeholder="请选择申请单 " style="width: 200px" v-model="searchApply.name" @search="searchAly"/>
          </div>
          <DataTable rowKey="phidApply"  :showConfig="false" :tableData="Data" :tableColumn="applyBillColumn" :pageConfig="applyPageConfig"></DataTable>
        </div>
      </div>
    </a-modal>

    <!-- 选择物资弹窗 -->
    <a-modal title="选择物资" width="800px" :visible="materialFormVisible" @ok="handleChoose" @cancel="handleCancel">
      <a-row>
        <a-col :span="4">
          <a-cascader
            v-model="pkMaterial"
            :options="materialList"
            :fieldNames="{ label: 'name', value: 'code', children: 'children' }"
            placeholder="请选择物资编号"
            style="width:400px"
            change-on-select
            @change="getNcMaterialList"
          />
        </a-col>
        <a-col :span="24">
          <DataTable
            rowKey="goodsCode"
            :tableData="materialData"
            :tableColumn="materialTableColumn"
            :pageConfig="materialPageConfig"
            :rowSelection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
            @refresh="getNcMaterialList"
          />
        </a-col>
      </a-row>
    </a-modal>

    <a-modal title="选择登记人" :visible="memberFormVisible" @cancel="hideMemberFormVisible" :footer="null" width="50%" >
      <div>
        <div>
          <div>
            <div style="color: rgba(0, 0, 0, 0.45);padding-left:10px">人员名称：</div>
            <a-input-search placeholder="请选择登记人 " style="width: 200px" v-model="searchMember.name" @search="searchMem"/>
          </div>
          <DataTable rowKey="phidApplyman"  :showConfig="false" :tableData="Data" :tableColumn="memberColumn" :pageConfig="memberPageConfig"></DataTable>
        </div>
      </div>
    </a-modal>

    <a-modal title="选择申请人部门" :visible="deptFormVisible" @cancel="hideDeptFormVisible" :footer="null" width="50%" >
      <div>
        <div>
          <div>
            <div style="color: rgba(0, 0, 0, 0.45);padding-left:10px">部门名称：</div>
            <a-input-search placeholder="请选择申请人部门 " style="width: 200px" v-model="searchDept.name" @search="searchDepts"/>
          </div>
          <DataTable rowKey="phidDept"  :showConfig="false" :tableData="Data" :tableColumn="deptColumn" :pageConfig="deptPageConfig"></DataTable>
        </div>
      </div>
    </a-modal>

    <a-modal title="选择登记单" :visible="registerFormVisible" @cancel="hideRegisterFormVisible" :footer="null" width="50%" >
      <div>
        <div>
          <div>
            <div style="color: rgba(0, 0, 0, 0.45);padding-left:10px">登记单编码：</div>
            <a-input-search placeholder="请选择申请人 " style="width: 200px" v-model="searchRegister.name" @search="searchReg"/>
          </div>
          <DataTable rowKey="phidRegister"  :showConfig="false" :tableData="Data" :tableColumn="registerColumn" :pageConfig="registerPageConfig"></DataTable>
        </div>
      </div>
    </a-modal>

  </div>

</template>

<script lang="ts">
import { Component, Vue, Watch } from 'vue-property-decorator';
import {Validate} from '@/decorator';

@Component
export default class registerInvoiceEdit extends Vue {
  orgid: any = ''
  projectid: any = ''
  formVisible:any = false
  applyFormVisible:any = false
  memberFormVisible:any = false
  materialFormVisible:any = false
  deptFormVisible:any = false
  registerFormVisible:any = false
  form: any = {
    phid: '',
    phidApply: '',
    phidUser: '',
    telephone: '',
    phidRegister: '',
    complanyName: '',
    projectName: '',
    billcode: '',
    billdate: this.getCurrentData(),
    dealTime: this.getCurrentData(),
    creatorName: '',
    deptName: '',
    enterDate: this.getCurrentData(),
    enterDoor: '',
    enterMeno: '',
    hasCardnum: '',
    carNumber: '',
    driverName: '',
    driverLicense: '',
    carWeight: '',
    grossWeight: '',
    carInnerSize: '',
    carOuterSize: '',
    carThickness: '',
    billtype: 'FJ002',
    billStatusName: '',
    memo: '',
    orgName: '',
    registerName: '',
    matrialName: '',
    phidMaterial: '',
    pkMaterial: ''
  };
  previewVisible: Boolean = false
  previewImage: any = ''

  searchProject: any = {
    name: ''
  }
  searchApply: any = {
    name: ''
  }
  searchMember: any = {
    name: ''
  }
  searchRegister: any = {
    name: ''
  }
  searchDept: any = {
    name: ''
  }
  searchMaterial: any = {
    name: ''
  }
  treeId: string = ''
  selectData: any = [] // 选择的物资
  pkMaterial: string[] = []
  materialData: any = [] // 物资列表
  selectedRowKeys: any[] = [];
  materialTableColumn: any = {
    phidMaterial: {
      label: '物资ID',
      width: 120
    },
    code: {
      label: '物资编码',
      width: 120
    },
    name: {
      label: '物资名称',
      width: 200
    }
    // before_num: {
    //   label: '规格',
    //   width: 120
    // },
    // later_num: {
    //   label: '型号',
    //   width: 120
    // },
    // later_num1: {
    //   label: '单位',
    //   width: 120
    // },
    // change_price: {
    //   label: '采购价',
    //   width: 120
    // }
  };
  materialPageConfig: any = {
    current: 1,
    total: 0,
    pageSize: 10,
    onChange: this.changeMaterialPage
  };
  rules: any = {
    phidApply: [{required: true, message: '请选择申请单', trigger: 'blur'}],
    billdate: [{required: true, message: '请输入单据日期', trigger: 'blur'}],
    carInnerSize: [{required: true, message: '请输入车厢内尺寸', trigger: 'blur'}],
    carOuterSize: [{required: true, message: '请输入车厢外尺寸', trigger: 'blur'}],
    carThickness: [{required: true, message: '请输入车厢底厚', trigger: 'blur'}],
    carWeight: [{required: true, message: '请输入行驶证上总重量', trigger: 'blur'}],
    driverLicense: [{required: true, message: '请输入驾驶证号码', trigger: 'blur'}],
    enterDate: [{required: true, message: '请输入进场日期', trigger: 'blur'}],
    enterDoor: [{required: true, message: '请输入进场门岗', trigger: 'blur'}],
    enterMeno: [{required: true, message: '请输入进场原因', trigger: 'blur'}],
    hasCardnum: [{required: true, message: '请选择车辆是否有牌', trigger: 'blur'}],
    registerName: [{required: true, message: '请选择申请人', trigger: 'blur'}],
    projectName: [{required: true, message: '请选择项目', trigger: 'blur'}],
    driverName: [{required: true, message: '请输入司机名称', trigger: 'blur'}],
    complanyName: [{required: true, message: '请选择区域', trigger: 'blur'}],
    telephone: [{required: true, message: '请输入申请人电话', trigger: 'blur'}]
  };
  projectList: any = [] // 项目列表

  materialList: any[] = [] // 物料列表

  btns: any[] = [
    {
      label: '上传文件',
      upload: true,
      accept: '.doc,.docx,.rar,.zip,.pdf,.jpg,.png',
      callback: (res: any) => this.uploadSuccess(res.fileList)
    }
  ]
  showUploadList: any = [] // 上传完图片展示
  countingTaskFileList: any = [] // 附件

  // 当前系统日期
  getCurrentData () {
    var d = new Date()
    return d.getFullYear() + '-' + ((d.getMonth() < 9 ? '0' + (d.getMonth() + 1) : (d.getMonth() + 1))) +
      '-' + (d.getDate() < 10 ? '0' + d.getDate() : d.getDate()) + ' ' + (d.getHours() < 10 ? '0' + d.getHours() : d.getHours()) +
      ':' + (d.getMinutes() < 10 ? '0' + d.getMinutes() : d.getMinutes()) + ':' + (d.getSeconds() < 10 ? '0' + d.getSeconds() : d.getSeconds())
  }
  // 打开项目选择弹窗
  showDiag () {
    this.formVisible = true
    this.getProjectList()
  }

  // 打开申请单选择弹窗
  showApplyDiag () {
    this.applyFormVisible = true
    this.getApplyBillList()
  }

  // 打开登记单选择弹窗
  showRegisterDiag () {
    this.registerFormVisible = true
    this.getRegisterBillList()
  }


  // 打开人员选择弹窗
  showMemberDiag () {
    this.memberFormVisible = true
    this.getMemberList()
  }
  changeMaterialPage (val: number) {
    this.materialPageConfig.current = val;
    this.getNcMaterialList();
  }

  // 打开物料选择弹窗
  showMaterialDiag () {
    this.materialFormVisible = true
    // this.getNcMaterialList()
  }

  // 关闭物料弹窗
  hideMaterialFormVisible () {
    this.materialFormVisible = false;
  }

  // 查询物料列表
  searchMaterialList (val: any) {
    this.searchMaterial.name = val
    this.getMaterialCategoryList()
  }

  // 获取物料数据
  getMaterialCategoryList () {
    this.$api.wuLiaoTierListFetch().then((res: any) => {
      this.materialList = res.data
    })
  }
  // 选择物资确定
  handleChoose () {
    // this.selectData.forEach((ele: any, index: number) => {
    //   this.$set(this.selectData[index], 'countingTaskGoodsFiles', [])
    //   this.$set(this.selectData[index], 'goodsSum', 0)
    // })
    this.Data = this.Data.concat(this.selectData)
    // let setMap = new Map()
    // this.Data.map((item: any) => setMap.set(item.goodsCode, item))
    // this.Data = [...setMap.values()]
    this.handleCancel()
  }
  handleCancel () {
    this.materialFormVisible = false
    this.selectData = []
    this.selectedRowKeys = []
  }
  // 复选物资
  onSelectChange (selectedRowKeys: string[], row: any) {
    this.selectedRowKeys = selectedRowKeys
    this.selectData = row
    console.log(this.selectData, 8888)
    this.form.matrialName = this.selectData[0].name
    this.form.phidMaterial = this.selectData[0].phidMaterial
  }
  // 获取NC物料
  getNcMaterialList () {
    let { current, pageSize } = this.materialPageConfig
    let data = {
      page: current,
      size: pageSize,
      id: this.treeId
    }
    this.$api.docInfoWuLiaoListFetch(data).then((res: any) => {
      this.materialData = res.data.records.map((item:any) => ({phidMaterial: item.pkMaterial, code: item.code, name: item.name}))
      this.materialList = res.data
      this.materialPageConfig.total = res.data.total
      if (!this.materialData.length && this.materialPageConfig.current > 1) {
        --this.materialPageConfig.current
        this.getNcMaterialList()
      }
    })
  }

  // 打开部门选择弹窗
  showDeptDiag () {
    this.deptFormVisible = true
    this.getDeptList()
  }

  // 关闭项目弹窗
  hideFormVisible () {
    this.formVisible = false;
  }

  // 关闭申请单弹窗
  hideApplyFormVisible () {
    this.applyFormVisible = false;
  }

  // 关闭申请人部门弹窗
  hideDeptFormVisible () {
    this.deptFormVisible = false;
  }

  // 关闭申请单弹窗
  hideMemberFormVisible () {
    this.memberFormVisible = false;
  }

  // 关闭登记单弹窗
  hideRegisterFormVisible () {
    this.registerFormVisible = false;
  }

  // 查询项目明细
  searchWl (val: any) {
    this.searchProject.name = val
    this.getProjectList()
  }

  // 查询申请单明细
  searchAly (val: any) {
    this.searchApply.name = val
    this.getApplyBillList()
  }

  // 查询人员列表
  searchMem (val: any) {
    this.searchMember.name = val
    this.getMemberList()
  }

  // 查询部门列表
  searchDepts (val: any) {
    this.searchDept.name = val
    this.getDeptList()
  }

  // 查询登记单列表
  searchReg (val: any) {
    this.searchRegister.name = val
    this.getRegisterBillList()
  }

  // 项目切换页面
  changePage (val: number) {
    this.pageConfig.current = val;
    this.getProjectList();
  }

  // 申请单切换页面
  applyChangePage (val: number) {
    this.applyPageConfig.current = val;
    this.getApplyBillList();
  }

  // 登记单切换页面
  registerChangePage (val: number) {
    this.registerPageConfig.current = val;
    this.getRegisterBillList();
  }

  // 人员列表切换页面
  memberChangePage (val: number) {
    this.memberPageConfig.current = val;
    this.getMemberList();
  }

  // 人员部门切换页面
  deptChangePage (val: number) {
    this.deptPageConfig.current = val;
    this.getDeptList();
  }

  // 分页参数
  pageConfig: any = {
    current: 1,
    total: 10,
    pageSize: 5,
    onChange: this.changePage
  };

  // 申请单分页参数
  applyPageConfig: any = {
    current: 1,
    total: 10,
    pageSize: 5,
    onChange: this.applyChangePage
  };

  // 登记单分页参数
  registerPageConfig: any = {
    current: 1,
    total: 10,
    pageSize: 5,
    onChange: this.registerChangePage
  }

  // 人员列表分页参数
  memberPageConfig: any = {
    current: 1,
    total: 10,
    pageSize: 5,
    onChange: this.memberChangePage
  };

  // 人员列表分页参数
  deptPageConfig: any = {
    current: 1,
    total: 10,
    pageSize: 5,
    onChange: this.deptChangePage
  };

  // 获取项目列表
  getProjectList () {
    let word = this.searchProject.name
    let { current, pageSize } = this.pageConfig
    let data: any = {}
    data.page = current
    data.size = pageSize
    if (word) {
      data.searchValue = word
    }
    this.$api.docInfoProjectListFetch(data).then((res: any) => {
      this.Data = res.data.records
      this.pageConfig.total = res.data.total;
    }).catch()
  }

  // 预览图片处理
  getBase64 (file: any) {
    return new Promise((resolve, reject) => {
      const reader = new FileReader();
      reader.readAsDataURL(file);
      reader.onload = () => resolve(reader.result);
      reader.onerror = error => reject(error);
    });
  }
  // 关闭预览
  handleCancels () {
    this.previewVisible = false
  }

  // 打开预览
  async handlePreview (file: any) {
    if (!file.url && !file.preview) {
      file.preview = await this.getBase64(file.originFileObj);
    }
    this.previewImage = file.url || file.preview;
    this.previewVisible = true;
  }
  // 切换预览
  handleChange ({ fileList }: any) {
    this.fileList = fileList;
  }

  // 获取申请单列表
  getApplyBillList () {
    let word = this.searchApply.name
    let { current, pageSize } = this.applyPageConfig
    let data: any = {}
    data.page = current
    data.size = pageSize
    if (word) {
      data.billcode = word
    }
    this.$api.dealApplyListFetch(data).then((res: any) => {
      this.Data = res.data.records
      this.applyPageConfig.total = res.data.total;
    }).catch()
  }

  // 获取登记单列表
  getRegisterBillList () {
    let word = this.searchRegister.name
    let { current, pageSize } = this.registerPageConfig
    let data: any = {}
    data.page = current
    data.size = pageSize
    if (word) {
      data.billcode = word
    }
    this.$api.registerListFetch(data).then((res: any) => {
      this.Data = res.data.records
      this.registerPageConfig.total = res.data.total;
    }).catch()
  }

  // 获取人员列表
  getMemberList () {
    let word = this.searchMember.name
    let { current, pageSize } = this.memberPageConfig
    let data: any = {}
    data.page = current
    data.size = pageSize
    if (word) {
      data.searchValue = word
    }
    this.$api.docInfoMemberListFetch(data).then((res: any) => {
      this.Data = res.data.records
      this.memberPageConfig.total = res.data.total;
    }).catch()
  }

  // 获取部门列表
  getDeptList () {
    let word = this.searchDept.name
    let { current, pageSize } = this.deptPageConfig
    let data: any = {}
    data.page = current
    data.size = pageSize
    if (word) {
      data.searchValue = word
    }
    this.$api.docInfoDeptListFetch(data).then((res: any) => {
      this.Data = res.data.records
      this.deptPageConfig.total = res.data.total;
    }).catch()
  }

  getAreaList () {
    let data: any = { page: '1', size: '99' }
    this.$api.docInfoAreaListFetch(data).then((res: any) => {
      res.data.records.map((item: any) => { item.label = item.name; item.value = item.phid + '-' + item.name })
      this.area = res.data.records
    }).catch()
  }

  showImg2 (index:any, arr:any) {
    this.$viewerApi({
      options: {
        initialViewIndex: index
      },
      images: arr
    })
  }
  Data: any[] = [];
  // 项目弹窗明细
  projectColumn: any = {
    ncProjectId: {
      label: '项目编码',
      minWidth: 60
    },
    ncProjectName: {
      label: '项目名称',
      minWidth: 140,
      hidden: true
    },
    action: {
      label: '操作',
      width: 100,
      template: [
        {
          tag: 'a',
          text: '确定',
          callback: this.confirmProject
        }
      ]
    }
  };

  // 申请单弹窗明细
  applyBillColumn: any = {
    billcode: {
      label: '申请单编码',
      minWidth: 60
    },
    billdate: {
      label: '申请单日期',
      minWidth: 60
    },
    projectName: {
      label: '项目',
      minWidth: 100
    },
    action: {
      label: '操作',
      width: 100,
      template: [
        {
          tag: 'a',
          text: '确定',
          callback: this.confirmApply
        }
      ]
    }
  };

  // 登记单弹窗明细
  registerColumn: any = {
    billcode: {
      label: '登记单编码',
      minWidth: 60
    },
    billdate: {
      label: '登记单日期',
      minWidth: 60
    },
    projectName: {
      label: '项目',
      minWidth: 100
    },
    action: {
      label: '操作',
      width: 100,
      template: [
        {
          tag: 'a',
          text: '确定',
          callback: this.confirmRegister
        }
      ]
    }
  };

  // 人员弹窗明细
  memberColumn: any = {
    memberAccount: {
      label: '人员账号',
      minWidth: 60
    },
    memberName: {
      label: '人员名称',
      minWidth: 60
    },
    memberPhone: {
      label: '电话',
      minWidth: 60
    },
    action: {
      label: '操作',
      width: 100,
      template: [
        {
          tag: 'a',
          text: '确定',
          callback: this.confirmMember
        }
      ]
    }
  };

  // 部门弹窗明细
  deptColumn: any = {
    deptCode: {
      label: '部门编码',
      minWidth: 60
    },
    deptName: {
      label: '部门名称',
      minWidth: 60
    },
    orgName: {
      label: '组织名称',
      minWidth: 60
    },
    action: {
      label: '操作',
      width: 100,
      template: [
        {
          tag: 'a',
          text: '确定',
          callback: this.confirmDept
        }
      ]
    }
  };

  get tableColumn () {
    return {
      rowno: {
        label: '行号',
        width: 80
      },
      phidMaterial: {
        label: '物料编码',
        width: 140
      },
      matrialName: {
        label: '物料名称',
        width: 140
      },
      unitName: {
        label: '单位',
        width: 80
      },
      price: {
        label: '单价',
        width: 120
      },
      sgsName: {
        label: '收货商',
        width: 150
      },
      telephone: {
        label: '电话',
        width: 120
      }
    }
  }
  init () {
    const {_alias: alias, phid: id} = this.$route.query
    this.id = id as string
    this.alias = alias as string
    this.getDetail()
    this.getAreaList()
    // this.getFile()
  }

  // 确定项目
  confirmProject (val:any, cb:any) {
    this.projectid = val.ncProjectId
    this.orgid = val.pkOrg
    this.form.projectName = val.ncProjectName
    this.form.orgName = val.orgName
    this.formVisible = false
  }

  // 确定人员
  confirmMember (val:any, cb:any) {
    this.form.telephone = val.memberPhone
    // this.form.deptName = val.deptNames
    this.form.phidApplyman = val.memberId
    this.form.phidUser = val.memberId
    this.form.registerName = val.memberName
    this.memberFormVisible = false
  }

  // 确定部门
  confirmDept (val:any, cb:any) {
    this.form.phidDept = val.pkDept
    this.form.deptName = val.deptName
    this.deptFormVisible = false
  }

  // 确定登记单
  confirmRegister (val:any, cb:any) {
    this.form.phidRegister = val.phid
    this.registerFormVisible = false
  }

  // 确定申请单
  confirmApply (val:any, cb:any) {
    this.form.phidApply = val.phid
    // 查询申请单明细，填充进场单明细中
    this.$api.dealApplyDetailFetch({phid: val.phid}).then(({ data }: any) => {
      this.approachDetailVOList = data.dealApplyDetailVOList.map((item: any) => {
        // 主表主键
        item.phidApproach = this.id
        // 申请单id
        item.phidApplyBody = item.phid
        // 行号
        // item.rowno = item.rowno;
        // 物料主键id
        // item.phidMaterial = item.phidMaterial;
        // 收购商id
        item.phidSgs = item.phidBjinfo;
        // 单位id
        // item.phidUnit = item.phidUnit;
        // 单价
        // item.price = item.price;
        // 单位id
        // item.telephone = item.telephone;
      })
      this.approachDetailVOList = data.dealApplyDetailVOList;
    })
    this.applyFormVisible = false
  }

  // 详情
  getDetail () {
    if (this.id) {
      this.$api.registerDetailFetch({phid: this.id}).then(({ data }: any) => {
        this.orgid = data.phidOrg
        this.projectid = data.phidProject;
        this.form = data // 基础信息
        this.form.hasCardnum = Number(data.hasCardnum);
        this.form.complanyName = data.phidArea + '-' + data.complanyName
      })
    }
  }

  // 保存
  handleSubmit () {
    this.form.phidOrg = this.orgid
    this.form.phidProject = this.projectid
    if (this.form.complanyName.split('-')[1] !== undefined) {
      this.form.phidArea = this.form.complanyName.split('-')[0]
      this.form.complanyName = this.form.complanyName.split('-')[1]
    }
    let taskFile = this.countingTaskFileList.map((item: any) => ({
      fileUrl: this.$util.getPicUrl(item)
    }))
    let data: any = this.form
    console.log('===========' + JSON.stringify(data))
    this.$api.registerAddModifyRegisterFetch(data).then(() => {
      this.$message.success('保存成功！')
      this.$router.back()
    })
  }

  // 附件
  getFile () {
    let data = { phid: this.id }
    this.$api.approachDetailFetch(data).then((res: any) => {
      this.countingTaskFileList = res.data.fileStoreList.map((item: any, index: number) => ({
        uid: -index - 1,
        url: item.fileUrl,
        name: item.fileUrl
      }))
      this.showUploadList = this.countingTaskFileList
    })
  }

  uploadSuccess (fileList: any) {
    this.countingTaskFileList = fileList;
    let list = JSON.parse(JSON.stringify(this.countingTaskFileList))
    this.showUploadList = list.map((item: any) => ({
      url: this.$util.getPicUrl(item)
    }))
  }
}
</script>


<style lang="scss" scoped>
#myPurchase-detail {
  .top-box{
    margin-bottom: 15px;
    .box-title{
      font-size: 16px;
      font-weight: 700;
      padding-left: 5px;
      color: #000;
      height: 15px;
      line-height: 15px;
      border-left: 3px solid rgb(62, 149, 231);
    }
  }
  .info{
    padding: 10px 0;
    .address{
      display: flex;
    }
    .info-left{
      width: 65px;
      margin-right: 10px;

    }
  }
  .container-title{
    font-size: 16px;
    font-weight: 700;
    padding-left: 5px;
    color: #000;
    height: 15px;
    line-height: 15px;
    border-left: 3px solid rgb(62, 149, 231);
  }
  .title-info{
    margin: 20px 0;
    font-size: 16px;
    .info-left{
      font-weight: 700;
    }
    .info-right{
      margin-right: 80px;
    }
  }
  .header-item{
    text-align: center;
  }
  .footer-btns {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 50px 0;
    .ant-btn {
      margin-right: 20px;
    }
  }

}
/deep/ .ant-select-selection-selected-value, .ant-input[disabled]{
  color: rgba(0, 0, 0, 0.8);
}
/deep/ .ant-input-number-input{
  color: rgba(0, 0, 0, 0.8) ;
}
</style>
